<!--
 * Description: Server指派
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Jian.Yang
 * Date: 2021/01/04 14:08
-->

<template>
  <BaseWrap>
    <!-- 查询条件 -->
    <BaseFunc
      drawer-size="600"
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="searchQuery"
    >
      <!--抽屉内部查询表单-->
      <template>
        <el-form class="g-advance-drawer-form" label-width="110px" :model="queryForm" size="mini">
          <el-row>
            <!--FD编号-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.fdId')">
                <el-input v-model="queryForm.fdId" clearable />
              </el-form-item>
            </el-col>

            <!--FD版本-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.version')">
                <el-input v-model="queryForm.version" clearable />
              </el-form-item>
            </el-col>

            <!--FD名称-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.fdName')">
                <el-input v-model="queryForm.fdName" clearable />
              </el-form-item>
            </el-col>

            <!--bu-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.bu')">
                <el-input v-model="queryForm.bu" clearable />
              </el-form-item>
            </el-col>

            <!--Temp Model Number-->
            <el-col :span="6">
              <el-form-item label="Temp Model">
                <el-input v-model="queryForm.tempModelNumber" clearable />
              </el-form-item>
            </el-col>

            <!-- fdStatus -->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.fdStatus')">
                <el-select
                  v-model="queryForm.fdStatus"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $fdStatus()"
                    :key="item.code"
                    :label="item.label"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>

            <!--FD报价期限-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.expiresDay')">
                <el-input v-model.number="queryForm.expiresDay" />
              </el-form-item>
            </el-col>

            <!--PBM负责人-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.pbmOwner')">
                <el-select
                  v-model="queryForm.pbmOwner"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getPbmUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.gcmFunction + ' ' + item.team }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!--ME负责人-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.meOwner')">
                <el-select
                  v-model="queryForm.meOwner"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getMEGcmUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.gcmFunction + ' ' + item.team }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!--EE负责人-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.eeOwner')">
                <el-select
                  v-model="queryForm.eeOwner"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getEEGcmUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.gcmFunction + ' ' + item.team }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

            <!--PKG负责人-->
            <el-col :span="6">
              <el-form-item :label="$t('serverBom.pkgOwner')">
                <el-select
                  v-model="queryForm.pkgOwner"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getPKGGcmUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.gcmFunction + ' ' + item.team }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <!-- 右侧筛选按钮 -->
      <template slot="btn-middle">
        <el-radio-group v-model="dataType" size="mini" @change="infoTableData">
          <el-radio-button label="all">{{ $t('button.all') }}</el-radio-button>
          <el-radio-button label="appointed">{{ $t('FdData.appointed') }}</el-radio-button>
          <el-radio-button label="unAppoint">{{ $t('FdData.unAppoint') }}</el-radio-button>
        </el-radio-group>
      </template>
    </BaseFunc>

    <!--报价FD数据表格-->
    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="pageQuery"
    >
      <!-- 左浮动 -->
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <!-- 默认内容 -->
      <template>
        <!--FD编号列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.fdId')"
          min-width="150px"
          prop="fdId"
          sortable
        />

        <!--FD版本列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.version')"
          min-width="90px"
          prop="version"
          sortable
        />

        <!--FD名称列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.fdName')"
          min-width="150px"
          prop="fdName"
          show-overflow-tooltip
          sortable
        />

        <!--bu类型列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.bu')"
          min-width="100px"
          prop="bu"
          sortable
        />

        <!--Temp Model Number-->
        <el-table-column
          align="center"
          label="Temp Model Number"
          min-width="180px"
          prop="tempModelNumber"
          show-overflow-tooltip
          sortable
        />

        <!--FD报价期限列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.expiresDay')"
          min-width="120px"
          prop="expiresDay"
          sortable
        />

        <!--专案PBM负责人列-->
        <el-table-column align="center" :label="$t('serverBom.pbmOwner')" min-width="100px">
          <template slot-scope="scope">
            <span>
              {{ $store.getters['user/getUserNameById'](scope.row.pbmOwner) || $t('result.none') }}
            </span>
          </template>
        </el-table-column>

        <!--专案ME负责人列-->
        <el-table-column align="center" :label="$t('serverBom.meOwner')" min-width="100px">
          <template slot-scope="scope">
            <span>
              {{ $store.getters['user/getUserNameById'](scope.row.meOwner) || $t('result.none') }}
            </span>
          </template>
        </el-table-column>

        <!--专案EE负责人列-->
        <el-table-column align="center" :label="$t('serverBom.eeOwner')" min-width="100px">
          <template slot-scope="scope">
            <span>
              {{ $store.getters['user/getUserNameById'](scope.row.eeOwner) || $t('result.none') }}
            </span>
          </template>
        </el-table-column>

        <!--专案PKG负责人列-->
        <el-table-column align="center" :label="$t('serverBom.pkgOwner')" min-width="100px">
          <template slot-scope="scope">
            <span>
              {{ $store.getters['user/getUserNameById'](scope.row.pkgOwner) || $t('result.none') }}
            </span>
          </template>
        </el-table-column>

        <!--创建人列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.createUser')"
          min-width="100px"
          prop="createUser"
          sortable
        >
          <template slot-scope="scope">
            <span>
              {{
                $store.getters['user/getUserNameById'](scope.row.createUser) || $t('result.none')
              }}
            </span>
          </template>
        </el-table-column>

        <!--创建时间列-->
        <el-table-column
          align="center"
          :label="$t('serverBom.createTime')"
          min-width="140px"
          prop="createTime"
          sortable
        />
      </template>

      <!-- 右浮动 -->
      <template slot="end">
        <!-- FD状态 -->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('serverBom.fdStatus')"
          min-width="120px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.fdStatus === 10" class="tag-blue">
              {{ $fdStatus({ code: scope.row.fdStatus }) }}
            </span>
            <span v-else class="tag-darkBlue">
              {{ $fdStatus({ code: scope.row.fdStatus }) }}
            </span>
          </template>
        </el-table-column>
        <!--是否指派-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('serverBom.isAppointed')"
          min-width="90px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.pbmOwner" class="tag-green">{{ '已指派' }}</span>
            <span v-else class="tag-red">{{ '未指派' }}</span>
          </template>
        </el-table-column>
        <!--操作列-->
        <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="140px"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPer('view')"
              size="mini"
              type="text"
              @click="rowView(scope.$index, scope.row)"
            >
              <i class="el-icon-view el-icon--right"></i>
              {{ $t('button.view') }}
            </el-button>
            <el-button
              v-if="$hasPer('appoint') && !scope.row.pbmOwner"
              size="mini"
              type="text"
              @click="rowAppoint(scope.$index, scope.row)"
            >
              <i class="el-icon-thumb el-icon--right"></i>
              {{ '指派' }}
            </el-button>
            <el-button
              v-if="$hasPer('reset') && scope.row.pbmOwner"
              size="mini"
              type="text"
              @click="rowReset(scope.$index, scope.row)"
            >
              <i class="el-icon-refresh el-icon--right"></i>
              {{ '重置' }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>

    <!--指派对话框-->
    <BaseDialog
      v-if="appointDialogVisible"
      title="指派"
      :visible.sync="appointDialogVisible"
      width="700px"
    >
      <ServerAppointEdit
        :input-data="currentEditRow"
        @cancel="appointDialogVisible = false"
        @save="afterEditSave"
      />
    </BaseDialog>

    <!--查看对话框-->
    <BaseDialog
      v-if="viewDialogVisible"
      custom-class="mini-head-dialog"
      :fullscreen="true"
      :show-close="false"
      :visible.sync="viewDialogVisible"
    >
      <ServerTabView
        v-if="viewDialogVisible"
        :input-data="currentEditRow"
        :visible.sync="viewDialogVisible"
      />
    </BaseDialog>
  </BaseWrap>
</template>

<script>
import ServerTabView from './components/ServerTabView'
import ServerAppointEdit from './components/ServerAppointEdit'
import { fdAppointList, fdStartAppoint } from '@/api/serverbom/fd'

export default {
  name: 'ServerAppoint',
  components: { ServerTabView, ServerAppointEdit },
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {
        fdId: '',
        version: '',
        fdName: '',
        fdStatus: '',
        projectName: '',
        model: '',
        modelName: '',
        modelDesc: '',
        baseProjectId: '',
        baseModel: '',
        baseConfig: '',
        expiresDay: '',
        receivedTime: '',
        meOwner: '',
        eeOwner: '',
        pkgOwner: '',
        isAssigned: '',
        assignedTime: '',
        completeTime: '',
        createPost: '',
        createUser: '',
        createTime: '',
        modifyPost: '',
        modifyUser: '',
        modifyTime: ''
      },
      // 查看对话框可见标识
      viewDialogVisible: false,
      // 指派对话框可见标识
      appointDialogVisible: false,
      // 当前编辑行的数据
      currentEditRow: {},
      dataType: 'unAppoint',

      statusQueryForm: {
        fdStatus: 10
      },
      IsStatus: 'status'
    }
  },
  created() {
    this.pageDataInit()
  },
  methods: {
    /* 页面数据初始化*/
    pageDataInit() {
      this.query(this.statusQueryForm)
    },
    infoTableData() {
      this.IsStatus = 'status'
      this.pageNumber = 1
      if (this.dataType === 'all') {
        for (const key in this.statusQueryForm) {
          this.statusQueryForm[key] = ''
        }
        this.query(this.statusQueryForm)
      } else if (this.dataType === 'unAppoint') {
        this.statusQueryForm.fdStatus = 10
        this.query(this.statusQueryForm)
      } else {
        this.statusQueryForm.fdStatus = 30
        this.startQuery()
      }
    },
    // 搜索
    searchQuery() {
      this.IsStatus = 'search'
      this.pageNumber = 1
      if (this.queryForm.fdStatus === 10) {
        this.dataType = 'unAppoint'
      } else if (this.queryForm.fdStatus === 30) {
        this.dataType = 'appointed'
      } else {
        this.dataType = 'all'
      }
      this.query(this.queryForm)
    },
    // 翻页不同的方法
    pageQuery() {
      if (this.IsStatus === 'search') {
        this.query(this.queryForm)
      } else {
        // 指派的不同接口的分页TODO:
        if (this.dataType === 'appointed') {
          this.startQuery()
        } else {
          this.query(this.statusQueryForm)
        }
      }
    },
    /* 查询表格数据*/
    async query(condition) {
      try {
        this.isRequesting = true
        this.advanceOptionDrawer = false
        const res = await fdAppointList({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: condition
        })
        this.tableData = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    /* 查询未指派表格数据*/
    async startQuery() {
      this.isRequesting = true
      this.advanceOptionDrawer = false
      try {
        const res = await fdStartAppoint({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: {
            fdStatus: this.statusQueryForm.fdStatus
          }
        })
        this.tableData = res.data.list
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    /* 行记录查看*/
    rowView(index, row) {
      this.currentEditRow = row
      this.viewDialogVisible = true
    },
    rowAppoint(index, row) {
      this.currentEditRow = row
      this.appointDialogVisible = true
    },
    rowReset(index, row) {
      this.currentEditRow = row
      this.appointDialogVisible = true
    },
    afterEditSave() {
      this.appointDialogVisible = false
      this.pageDataInit()
    }
  }
}
</script>
